<template>
  <div id="system-setting-page">
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />
    <a-card :loading="loading" title="基础设置" style="width: 100%">
      <a-space direction="vertical" style="width: 100%" size="large">
        <a-space>
          月度佣金计算开始日：
          <a-input :value="settings.commissionStartDay" addonAfter="日" disabled />
          <a-button @click="handleSetup('commission_start_day')">设置</a-button>
        </a-space>
        <a-space>
          月度奖金计算开始日：
          <a-input :value="settings.bonusStartDay" addonAfter="日" disabled />
          <a-button @click="handleSetup('bonus_start_day')">设置</a-button>
        </a-space>
      </a-space>
      <a-space direction="vertical" style="width: 100% ;margin-top: 20px">
        <p>说明：</p>
        <ul>
          <li>开始日为 1 号时，结束日为当月最后一天；</li>
          <li>开始日为 X 号（X≥2）时，结束日为下个月的（X-1）号（若该日期不存在，则自动调整为下个月最后一天）</li>
        </ul>
      </a-space>

    </a-card>



    <a-modal v-model:open="showModalSetting">
      <template #title>
        {{ settingTitle }}设置
      </template>
      <div class="modal-content">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="formState">
          <a-form-item label="设置值">
            <a-select v-model:value="formState.value" placeholder="请选择开始日" :options="options">
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button type="primary" @click="handleSave">保存</a-button>
        <a-button style="margin-left: 10px" @click="showModalSetting = false">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script lang='ts' setup>
import { systemSettingApi } from '@/api'
import BreadcrumbComponent from '@/components/BreadcrumbComponent.vue'
import { message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue'
const breadcrumbItems = [{ url: '', name: '系统设置' }]
const settings = reactive({
  commissionStartDay: '',
  bonusStartDay: ''
})
const loading = ref(false)
onMounted(async () => {
  loading.value = true;
  try {
    const { data } = await systemSettingApi.getAllSystemSetting();
    Object.assign(settings, data);
  } catch (error) {
    console.error('获取系统设置失败:', error);
  } finally {
    loading.value = false;
  }
})

const showModalSetting = ref(false)
const settingTitle = ref('')

const labelCol = { span: 5 };
const wrapperCol = { span: 13 };
const formState = reactive({
  value: ''
})
const settingKey = ref('')

const options = [...Array(31)].map((_, i) => ({ value: (i + 1).toString(), label: (i + 1) + '日' }));

const handleSetup = (key: string) => {
  // 这里可以添加设置逻辑
  showModalSetting.value = true
  settingKey.value = key;
  if (key === 'commission_start_day') {
    formState.value = settings.commissionStartDay;
    settingTitle.value = '月度佣金计算开始日';
  } else {
    formState.value = settings.bonusStartDay;
    settingTitle.value = '月度奖金计算结束日';
  }
}

const handleSave = async () => {
  if (!formState.value) {
    message.warning('请选择一个有效的日期');
    return;
  }
  if (settingKey.value === 'commission_start_day') {
    settings.commissionStartDay = formState.value;
  } else {
    settings.bonusStartDay = formState.value;
  }
  try {
    await systemSettingApi.setSystemSetting({
      key: settingKey.value,
      value: formState.value
    });
    message.success('设置已保存');
  } catch (error) {
    console.error('保存失败:', error);
    return;
  } finally {
    showModalSetting.value = false;
  }
}

</script>
<style scoped>
/* 组件样式 */
.modal-content {
  padding: 20px;
}
</style>